<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
        position:属性指定了元素的定位类型。
            static: 不设置的时候的默认值就是static，静态定位，没有定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列
            absolute: 通过 top left right bottom 指定元素在页面上的固定位置，定位后元素会让出原来位置,其他元素可以占用
            reletive: 相对于自己原来的位置进行地位，定位后保留原来的站位,其他元素不会移动到该位置
            fixed: 失踪在浏览器窗口固定位置,不会随着页面的上下移动而移动，元素定位后会让出原来的位置,其他元素可以占用
        left
        right
        top
        bottom
    -->
    <style>
        .outerDiv {
            width: 400px;
            height: 1300px;
            border: 1px solid red;
        }
        .innerDiv {
            width: 100px;
            height: 100px;
            border: 1px solid yellow;
        }
        .d1 {
            float: left;
            background-color: aqua;
            position: relative;
            /* position: absolute; */
            /* position: fixed; */
            top: 30px;
            right: 30px;
        }
        .d2 {
            float: left;
            background-color: rgb(255, 0, 179);
        }
        .d3 {
            float: left;
            background-color: rgb(255, 166, 0);
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv d1">1</div>
        <div class="innerDiv d2">2</div>
        <div class="innerDiv d3">3</div>
    </div>
</body>
</html>